<template>
  <div style="max-height: 50vh;overflow: auto">
    <el-form label-width="80px" :model="form" :rules="returnsRules" ref="returnsRef">
      <div style="display: flex;">
        <el-form-item label="退货仓库" prop="shopName">
          <el-select v-model="form.shopName" filterable placeholder="请选择" @change="selectShop">
            <el-option
              v-for="item in shopList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="退货日期" style="margin-left: 50px;" prop="orderDate">
            <el-date-picker
              value-format="yyyy-MM-dd"
              v-model="submitDate.orderDate"
              align="right"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions"
            />
          </el-form-item>
        </div>
        <el-form-item label="退货地址">
          <div style="display: flex; flex-direction: column;">
            <span>{{ form.consignee }} {{ form.phone }}</span>
            <span>{{ form.areaName }} {{ form.address }}</span>
          </div>
        </el-form-item>
      </el-col>
      <div class="product_header_name">
        <span style="font-size: 18px;color:#409EFF;margin: 10px 10px;">商品明细</span>
      </div>
      <el-table
        :data="form.itemList"
        border
        style="width: 100%">
        <el-table-column
          type="index"
          width="50"
          align="center"
          label="序号"
          fixed
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="品名">
        </el-table-column>
        <el-table-column
          prop="spec"
          label="规格">
        </el-table-column>
        <el-table-column
          label="单价"
          prop="price"
          width="70"
          align="center">
        </el-table-column>
        <el-table-column
          prop="quantity"
          label="退货数量"
          width="50"
          align="center">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="金额"
          prop="amount"
          width="70"
          align="center">
        </el-table-column>
      </el-table>
    </el-form>
  </div>

</template>

<script>
  import {EventBus} from '@/api/eventBus'
  import utils from '../../../utils/utils'
  import {list as shopList} from '@/api/shop'
  // import {shipping} from '../../../api/askfor'
  import { received, receivedAndAudit } from '@/api/askfor'
  export default {
    name: 'returns',
    props:['form'],
    data(){
      return{
        itemList: [],
        shopId: '',
        shopList: [],
        returnsRules: {
          shopName: [
            { required: true, message: '请选择仓库', trigger: 'blur' },
          ],
          orderDate: [
            { required: true, message: '请选择日期', trigger: 'blur' },
          ]
        },
        returnsData: {
          memberId: '',
          address: '',
          itemList: [],
          officeId:'',
          operatorId:''
        },
        submitDate: {
          orderDate: ''
        },
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now()
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }]
        },
      }
    },
    created() {
      this.loadShop()
      let date = new Date()
      let year = date.getFullYear()
      let month = date.getMonth() + 1 + ''
      let day = date.getDate() + ''
      let nowDate = `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`
      this.$set(this.submitDate, 'orderDate', nowDate)
      // this.submitDate.orderDate = `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`
    },
    methods:{
      dialogConfirm(val) {
        this.returnsData.officeId = val.id;
        this.officeName = val.name
      },
      selectShop(data) {
        this.shopId = data
      },
      //  退货仓库
      loadShop() {
        var _this = this
        let params = new URLSearchParams();
        shopList(params).then(response => {
          console.log(response);
          _this.shopList = response.data.data
        }).catch(error => {
          console.log('error!!')
        });
      },
      returnsClick () {
        this.$refs.returnsRef.validate((valid) => {
          if (valid) {
            var _this = this
            let params = new URLSearchParams();
            params.append('shopId', _this.shopId);
            params.append('orderDate', _this.submitDate.orderDate);
            received(_this.form.id,params).then(response => {
              this.$message({
                message: response.content,
                offset: 120,
                center: true
              });
              this.$emit('returnsClose')
              this.$emit('findAskfor')
              EventBus.$emit('askfor-edit', response.data)
            }).catch(error => {
            })
          }
        })
      },
      aReturnsClick(){
        this.$refs.returnsRef.validate((valid) => {
          if (valid) {
            var _this = this
            let params = new URLSearchParams();
            params.append('shopId', _this.shopId);
            params.append('orderDate', _this.submitDate.orderDate);
            receivedAndAudit(_this.form.id,params).then(response => {
              this.$message({
                message: response.content,
                offset: 120,
                center: true
              });
              this.$emit('returnsClose')
              this.$emit('findAskfor')
              EventBus.$emit('askfor-edit', response.data)
            }).catch(error => {
            })
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>
